<template>
	<!-- :style="{background:relayData.settings.bgcolor}"  v-if="showData" -->
  <div >
	<div class="relay_2" >
		<div class="bg" :style="{'background':'url('+setData.relay_bg_image+') center center no-repeat'}"></div>
		<div class="control">
			<div class="music">
				<MusicAutoPlay class="open" :icon="icon" :stopIcon="stopicon"  ref="audioCon" :music="setData.bgmusic" v-if="setData.open_music"></MusicAutoPlay>
			</div>
		</div>
		<div class="content">
			<div class="img">
				<img :src="setData.relay_photo_image" alt=""/>
			</div>
			<div class="dec" ref="p2_dec" v-if="!postStatus">
				{{setData.relay_desc}}
			</div>
		</div>
		<div class="logo sign" ref="p2_logo" v-if="!postStatus">
			<img :src="setData.relay_give_image" alt=""/>
		</div>
		<div class="logo btn" @click="startAnimation" v-if="!postStatus" ref="p2_btn">
			<img :src="setData.rely_enter_button" alt=""/>
		</div>
		
		<div v-if="postStatus" class="fadeInUpBig3s" ref="p2_result">
			<div class="share_num" :style="{'color':setData.rely_share_color}">{{numsObj.text[0]}} <span :style="{'color':setData.rely_share_num_color}">{{num}}</span>{{numsObj.text[1]}}</div>
			<div class="logo btn share" @click="openModal">
				<img :src="setData.rely_share_button" alt=""/>
			</div>
		</div>
	</div>
	
	<div class="modal" v-if="modal">
		<div class="content" :style="{'color':setData.rely_share_color}">
			<!-- 我是第<span :style="{'color':setData.rely_share_num_color}">{{num}}</span>位为英烈献花的人 -->
		</div>
		<div class="btn">
			<div @click="getPoster(1)">
				<div>
					<img src="../../../static/poster_relay/poster.png" alt=""/>
				</div>
				<div class="title">生成海报</div>
			</div>
			<div @click="getPoster(2)">
				<div>
					<img src="../../../static/poster_relay/share_icon.png" alt=""/>
				</div>
				<div class="title">更多</div>
			</div>
		</div>
		<div class="close" @click="closeModal">
			<img src="../../../static/poster_relay/modal_close.png" alt=""/>
		</div>
	</div>
	
	<div class="modalPoster" v-if="modalPoster" @touchmove.stop.prevent="moveHandle" @click="closeModalPoster">
		<div class="modal_inner" @click.stop="hideModals($event)" v-if="showStauts==1">
			<div class="pla"></div>
			<img class="showimg" v-if="canvasImg!=''" :src="canvasImg" />
		
			<div class="no_image" v-else></div>
			<div class="text">长按保存图片</div>
		
			<vue-canvas-poster v-if="startCanvas" :widthPixels="1000" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster>
		</div>
		<div class="showGuide" v-if="showStauts==2">
			<view class="wechatText">
				<span>点击右上角“···”按钮 <br/>  分享给好友</span>
				<img src="@/static/guess/top-right.png"/>
			</view>
		</div>
	</div>
	<relayPosterImage v-if="startPoster" :title="data" :data="setData" :text="numsObj" @back="getImage"></relayPosterImage>
  </div>
  
</template>

<script>
import {ActivityInfo,getRelayNumber} from '@/api/api.js'
import { mapGetters } from 'vuex'
import {isQianfan,isWeiXin,setWechatShare,shareFun} from '@/until/QFH5.js'
import relayPosterImage from './relayPosterImage.vue'
export default {
  computed: {
   	   ...mapGetters(['frameData'])
   	},
  components: {relayPosterImage},
  data() {
    return {
		actid:'',
		data:{},
		setData:{
			open_music:false,
		},
		showData:true,
		icon:require('../../../static/poster_relay/music_open.png'),
		stopicon:require('../../../static/poster_relay/music_close.png'),
		
		postStatus:false,
		numsText:'我是第100位接班人',
		numsObj:{},
		// frameData:{},
		isframe:false,//被后端引用,
		num:0,
		
		modal:false,
		modalPoster:false,
		canvasImg:'',
		startCanvas:false,
		painting:{},
		showStauts:1,
		startPoster:false
    }
  },
  
  methods: {
	  getPoster(val){
		  if(val==1){
			  this.showStauts = val
			  this.openModalPoster()
			  this.startPoster = true
			  uni.showLoading({
			  	title:'海报生成中'
			  })
			  // this.setPainting()
		  }else{
			  let data =  this.data
			  let url = window.location.origin + '/plugin-view/?plugin='+this.$route.query.plugin+"&type="+this.$route.query.type+"&id="+this.actid
			  if(isQianfan()){
				QFH5.setShareInfo(data.title,data.settings.relay_photo_image,data.settings.relay_desc,url,function(state,data){})
			  	QFH5.openShareDialog()
				return
			  }else{
				setWechatShare(data.title,data.settings.relay_photo_image,data.settings.relay_desc,url)
			  	this.showStauts = val
			  	this.openModalPoster()
			  }
		  }
		  
		  this.closeModal()
		  
	  },
	  openModal(){
		this.modal = true
	  },
	  closeModal(){
		  this.modal = false
	  },
	  openModalPoster(){
	  		this.modalPoster = true
	  },
	  closeModalPoster(){
	  		this.modalPoster = false
	  },
	  getImage(src){
		  uni.hideLoading()
		  this.canvasImg = src
		  this.startPoster = false
	  },
	  setPainting(pix){
		// uni.showLoading({
		// 	title:'海报生成中'
		// })
		// let qrurl = location.origin+"/plugin-view/?&plugin=guess&type=relay&id="+this.actid
		// qrurl = encodeURIComponent(qrurl)
	 //  	this.painting={
	 //  		width: '600px',
	 //  		height: '1290px',
	 //  		background:this.setData.banner,
	 //  		views: [
		// 	  {
		// 		  type:'rect',
		// 		  css:{
		// 			  color:'#fff',
		// 			  width:'508px',
		// 			  height: '439px',
		// 			  top:'265px',
		// 			  left: '46px',
		// 		  }
		// 	  },
	 //  		  {
	 //  		    type: 'image',
	 //  		    url: this.setData.relay_photo_image,
	 //  		    css: {
	 //  		  		top:'279px',
	 //  		        left: '60px',
	 //  		  		width:'480px',
	 //  		  		height: '411px',
	 //  		  		mode: 'scaleToFill',
		// 			shadow: '0px 6px 20px rgba(0,0,0,0.3)'
	 //  		    }
	 //  		  },
		// 	  {
		// 	    type: 'text',
		// 	    text:this.numsText,
		// 	    css: {
		// 	  		top:'756px',
		// 	        left: '76px',
		// 			width:'448px',
		// 			fontFamily: 'PingFang SC',
		// 			lineHeight:'56px',
		// 			fontWeight: '400',
		// 			fontSize: '40px',
		// 			textAlign:'center'
		// 	    }
		// 	  },
		// 	  {
		// 	    type: 'text',
		// 	    text: '&',
		// 	    css: {
		// 	      left: '0px',
		// 	      top: '895px',
		// 	      width: '600px',
		// 	      color: "#C5C5C5",
		// 	      fontSize: '0px',
		// 	      textAlign: 'center',
		// 	      maxLines: 1,
		// 	  	  borderWidth: '0.5px',
		// 	  	  borderColor: '#C5C5C5',
		// 	  	  borderStyle:'dashed'
		// 	    }
		// 	  },
		// 	  {
		// 	    type: 'qrcode',
		// 	    content: qrurl,
		// 	    css: {
		// 	      left: '46px',
		// 	      top: '917px',
		// 	      width: '180px',
		// 	      height: '180px',
		// 	  	 color: '#000',
			  						  
		// 	    }
		// 	  },
		// 	  {
		// 	    type: 'text',
		// 	    text:'长按图片,识别二维码参与活动',
		// 	    css: {
		// 	  		top:'963px',
		// 	        left: '246px',
		// 	  		 width:'278px',
		// 	  		 fontFamily: 'PingFang SC',
		// 	  		 lineHeight:'42px',
		// 	  		 fontWeight: '400',
		// 	  		 fontSize: '30px',
		// 	  		 textAlign:'left',
		// 			 color:'#999999',
		// 	    }
		// 	  },
		// 	  {
		// 	    type: 'text',
		// 	    text:'活动赞助商：'+this.setData.relay_sponsors,
		// 	    css: {
		// 	  		bottom:'100px',
		// 	        left: '46px',
		// 	  		 width:'508px',
		// 			 height:'42px',
		// 	  		 fontFamily: 'PingFang SC',
		// 	  		 lineHeight:'42px',
		// 	  		 fontWeight: '400',
		// 	  		 fontSize: '30px',
		// 	  		 textAlign:'left',
		// 			color:'#222',
		// 	    }
		// 	  },
		// 	  {
		// 	    type: 'text',
		// 	    text:'承办单位：'+this.setData.copyright,
		// 	    css: {
		// 	  		bottom:'58px',
		// 	        left: '46px',
		// 	  		width:'508px',
		// 			height:'42px',
		// 	  		 fontFamily: 'PingFang SC',
		// 	  		 lineHeight:'42px',
		// 	  		 fontWeight: '400',
		// 	  		 fontSize: '30px',
		// 	  		 textAlign:'left',
		// 	  		color:'#222',
		// 	    }
		// 	  },
	 //  		]
	 //  	}
		// let length = this.painting.views.length
		// if(this.setData.copyright=='')this.painting.views.splice(length-1,1)
		// if(this.setData.relay_sponsors==''){
		// 	if(this.setData.copyright==''){
		// 		this.painting.views.splice(length-1,1)
		// 	}
		// 	this.painting.views.splice(length-2,1)
		// }
	 //  	this.startCanvas = true
	  },
	  //调用拼图
	  success(src) {
	    this.canvasImg = src
		uni.hideLoading()
	    this.$nextTick(()=>{
	  	  this.startCanvas =false
	    })
	  },
	  fail(err) {
		uni.hideLoading()
	  	this.$nextTick(()=>{
			this.startCanvas =false
	  	})
	    console.log('fail', err)
	  },
	  moveHandle(){
	  
	  },
	  hideModals(event){
	    event.stopPropagation()
	  },
	  nextPage(val){
		  switch(val){
			  case 1: 
					this.page = 2
				break;
			  case 2:
				
				break;
			  default:break;
		  }
	  },
	  startAnimation(){
		 
		  this.checkNum()
	  },
	  checkNum(){
		  if(this.isframe){
			  this.numsText = this.setData.relay_play_num.replace(/\{number\}/g,'99(模拟)') 
			  this.numsObj = {
				  text:this.setData.relay_play_num.split('{number}' ),
				  num:99
			  }
			   this.num = 99
			  return
		  }
		  getRelayNumber({actid:uni.getStorageSync('actid')}).then(res=>{
			  if(res.code==0){
				  this.numsText = this.setData.relay_play_num.replace(/\{number\}/g,res.data.play_num)
				  this.numsObj = {
				  				  text:this.setData.relay_play_num.split('{number}' ),
				  				  num:res.data.play_num
				  }
				  this.num = res.data.play_num
				  let url = window.location.origin + '/plugin-view/?plugin='+this.$route.query.plugin+"&type="+this.$route.query.type+"&id="+this.actid
				  setWechatShare(this.data.title,this.data.settings.relay_photo_image,this.numsText,url)
				   this.setAnimationFirstPage()
			  }else{
				uni.showToast({
					title:res.text,
					icon:'none'
				})
			  }
		  })
	  },
	  async init(){
		  let res = {}
		  if(!this.isframe){
		  		res = await ActivityInfo({actid:this.actid})
		  }else{
				if(Object.keys(this.frameData.data).length>1)
					res = this.frameData
				else{
					uni.showToast({
						title:'数据装载中，稍后',
						icon:'none'
					})
					return
				}
		  }
		  this.data = res.data
		  this.setData = res.data.settings
		  this.$setTitle(res.data.title)
		  uni.setStorageSync('title',res.data.title) 
		  let url = window.location.origin + '/plugin-view/?plugin='+this.$route.query.plugin+"&type="+this.$route.query.type+"&id="+this.actid
		  if(isWeiXin()){
		  		let data =  this.data
		  		setWechatShare(data.title,data.settings.relay_photo_image,data.settings.relay_desc,url)
				// let data =  res.data
				// shareFun(data.title,data.settings.web_banner,data.settings.relay_desc,window.location.href,null,()=>{})
		  }
		  if(isQianfan()){
		  	let data =  this.data
		  	QFH5.setShareInfo(data.title,data.settings.relay_photo_image,data.settings.relay_desc,url,function(state,data){})
		  }
	  },
	  setAnimationFirstPage(){
		  let lgo = this.$refs['p2_logo']
		  let dec = this.$refs['p2_dec']
		  let btn = this.$refs['p2_btn']
		  this.$refs['p2_dec'].className= "dec zoomOut"
		  this.$refs['p2_logo'].className= "logo sign fadeOutUp"
		  this.$refs['p2_btn'].className= "logo btn zoomOut"
		  let _this = this
		  lgo.addEventListener('animationend', function() {
		  		_this.postStatus = true
		  		_this.$refs['p2_result'].className="dec fadeInUpBig"
		  }, false);
		  dec.addEventListener('animationend', function() {
		  		_this.$refs['p2_dec'].style.opacity="0"
		  }, false);
		  btn.addEventListener('animationend', function() {
		  		_this.$refs['p2_btn'].style.opacity="0"
		  }, false);
	  },
	  //被当做iframe引用时处理数据
	  setIframeData(){
	  },
  },
  mounted() {
	this.init()
  },
  created() {
	this.actid =uni.getStorageSync('actid')
	let web  = uni.getStorageSync('WEB') || null
	if(web){
		this.isframe  = true
		this.actid = '123'
		// this.setIframeData()
	}
  },
  onLoad(op){
	  uni.setStorageSync('actid',op.id)
	  this.$store.commit('SETACTIVITYNAME', op.plugin)
	  this.$store.commit('SETACTIVITYTYPE', op.type)
  },
  watch:{
  	  frameData:{
  		  handler(newVal,oldVal){
			  let web  = uni.getStorageSync('WEB') || null
			  if(!web){
			  	return
			  }
			  if(!newVal &&  Object.keys(newVal.data).length>1){
			  				  console.log('更新')
			  				  this.init()
			  }
  		  },deep:true,immediate:true
  	  }
  }
  

}
</script>

<style scoped lang="scss">
	@import url("../animation.css");
	.relay_2{
		padding-top: 1rpx;
		margin-top: -1rpx;
		.bg{
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			background-size: cover!important;
			z-index: -1;
		}
		.control{
			position: absolute;
			right: 73rpx;
			top:76rpx;
			.music{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.content{
			width: 580rpx;
			// height: 555rpx;
			padding: 30rpx;
			margin: 163rpx auto 0;
			
			background: rgba(255,255,255,1);
			box-shadow: 0px 9px 22px rgba(0,0,0,0.16);
			.img{
				line-height: 0;
				img{
					width: 580rpx;
					// height: 435rpx;
					// border: 1rpx solid red;
				}
			}
			.dec{
				margin-top: 30rpx;
				height: 90rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 48rpx;
				color: #222222;
				-webkit-box-orient: vertical;
				display: -webkit-box;
				line-clamp: 2;
				-webkit-line-clamp: 2;  /*只显示6行*/
				overflow: hidden;   /*溢出隐藏*/
				text-overflow: ellipsis;
			}
		}
		.logo{
			line-height: 0;
		}
		.sign{
			text-align: center;
			width: 255rpx;
			height: 305rpx;
			margin: 37rpx auto 16rpx;
			img{
				width: 255rpx;
				// height: 305rpx;
			}
		}
		.btn{
			width: 478rpx;
			height: 100rpx;
			margin: 0 auto;
			img{
				width: 478rpx;
				// height: 100rpx;
			}
		}
		.share_num{
			width:492rpx;
			font-size: 44rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 62rpx;
			margin: 72rpx auto 83rpx;
			text-align: center;
		}
		.share{
			margin-top: 0;
		}
	}
	
	.modal{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: rgba(0,0,0,0.9);
		
		.content{
			margin: 43% auto 0;
			width: 492rpx;
			height: 140rpx;
			text-align: center;
			font-size: 44rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 78rpx;
			color: #FFFFFF;
		}
		.btn{
			margin: 143rpx 0 0 0  ;
			width: 100%;
			display:flex;
			justify-content: center;
			&>div{
				margin:0 26rpx
			}
			.title{
				margin-top: -8rpx;
				width:159rpx;
				color: #fff;
				text-align: center;
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 42rpx;
			}
			&>div>div{
				line-height: 0;
				img{
					width:159rpx;
					height: 159rpx;
				}
			}
		}
		.close{
			width: 78rpx;
			margin: 174rpx auto 0;
			line-height: 0;
			img{
				width:78rpx;
				height: 78rpx;
			}
		}
	}
	
	.modalPoster{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9;
		background-color: rgba(0, 0, 0, .7);
		text-align: center;
		line-height: 0;
		  .modal_inner{
			position: relative;
			z-index: 10;
			width:500rpx;
			height: auto;
			margin: 10vh auto 0;
			overflow: hidden;
			
			.pla{
			  height: 1rpx;
			}
			.showimg{
			  // margin-top: 0rpx;
			  width:500rpx;
			  height: auto;
			  max-height: 80vh;
			}
			.no_image{
			  width:500rpx;
			  height: 964rpx;
			  background: rgba(255,255,255,0.3);
			}
			.text{
			  padding-top: 30rpx;
			  width: 100%;
			  text-align: center;
			  font-size: 30rpx;
			  font-family: PingFang SC-Regular, PingFang SC;
			  font-weight: 400;
			  color: #FFFFFF;
			  line-height: 40px;
			}
		}
		.wechatText{
			line-height: 0rpx;
			position: relative;
			width: 100%;
			height: 100%;
			&>span{
				color: #FFFFFF;
				font-size: 40rpx;
				font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
				line-height: 60rpx;
				width: 400rpx;
				height: 242rpx;
				position: absolute;
				// left: 50%;
				// top: 50%;
				// transform: translate(-50%,-50%);
				top: 164rpx;
				right: 46rpx;
				letter-spacing: 1.5rpx;
			}
			&>img{
				width: 84rpx;
				height: 115rpx;
				position: absolute;
				top: 27rpx;
				right: 60rpx;
				// transform: rotate(-40deg);
				// animation: bigger 1.5s linear infinite;
			}
		}
	
	}
	
	@-webkit-keyframes InFlash {
	
		0% {
			opacity: 0
		}
			
		to {
			opacity: 1
		}
	}
	
	@-webkit-keyframes zoomOut1 {
		0% {
			opacity: 1
		}
	
		// 50% {
		// 	opacity: 0;
		// }
	
		100% {
			opacity: 0
		}
	}
	
	@keyframes zoomOut1 {
		0% {
			opacity: 1
		}
	
		// 50% {
		// 	opacity: 0;
		// }
	
		100% {
			opacity: 0
		}
	}
	
	.animationIn{
		animation:fadeIn 1.5s 1 ease-in-out;
	}
	.animationInTwo{
		animation:fadeIn 1.5s 1 linear;
	}
	.fadeInUpBig3s{
		animation:fadeInUpBig 1s 1 linear;
	}
	.zoomOut {
		-webkit-animation-name: zoomOut1;
		animation:zoomOut1 0.5s 1 linear;
	}
	
</style>
